<template>
  
  <view class="banner radius-10" style="background-color: #fff;">
    <view class="cart-list">
      <!-- 全选框 -->
      <view class="select-all margin-left-sm">
        <u-checkbox
          v-model="isAllSelected"
          @change="handleSelectAll"
          shape="circle"
          size="40"
          activeColor="#FF4945"
        ></u-checkbox>
        <view class="left flex">
          <u-icon
            name="https://env-00jxt1fzew48.normal.cloudstatic.cn/car/dianpu.png"
            size="36"
            class="icons"
          ></u-icon>
          <view class="ha margin-left-xs">哈雷</view>
        </view>
      </view>

      <!-- 购物车列表 -->
      <view class="cart-item" v-for="(item, index) in cartItems" :key="item.id">
        <view class="item-wrapper flex align-center">
          <!-- 选择框 -->
          <view class="topth margin-bottom-xl">
            <u-checkbox
              size="40"
              v-model="item.checked"
              @change="(value) => handleItemSelect(value, index)"
              shape="circle"
              activeColor="#FF4945"
            ></u-checkbox>
          </view>

          <!-- 商品信息 -->
          <view class="item-content">
            <image
              class="goods-image"
              :src="item.image"
              mode="aspectFill"
            ></image>
            <view class="goods-info">
              <view class="goods-name text-df text-bold">{{ item.name }}</view>
              <view class="goods-spec text-xs flex justify-around align-center">
                {{ item.spec }}
                <u-icon name="arrow-down" size="16"></u-icon>
              </view>
              <view class="price-wrapper margin-top">
                <text class="price text-xl">{{ item.price }}</text>
                <!-- 数量调整器 -->
                <u-number-box3
                  v-model="item.num"
                  @change="(value) => handleNumberChange(value, index)"
                  :min="1"
                  :max="99"
                ></u-number-box3>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';

export default {
  name: 'cart-list',
  computed: {
    ...mapState('$cart', ['cartItems']),
    ...mapGetters('$cart', ['isAllSelected']),
  },
  methods: {
    ...mapMutations('$cart', [
      'SET_ALL_CHECKED',
      'TOGGLE_ITEM_CHECKED',
      'UPDATE_ITEM_QUANTITY',
    ]),

    handleSelectAll(value) {
      this.SET_ALL_CHECKED(value.value);
    },

    handleItemSelect(value, index) {
      this.TOGGLE_ITEM_CHECKED(index);
    },

    handleNumberChange(value, index) {
      this.UPDATE_ITEM_QUANTITY({
        index,
        quantity: value.value,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.cart-list {
  width: 100%; // 确保宽度占满父容器
  padding: 20rpx;

  .select-all {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .icons {
      margin-left: 10rpx;
    }
  }

  .cart-item {
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
 

    .item-wrapper {
      padding: 20rpx;
      display: flex;
      align-items: center;

      .item-content {
        flex: 1;
        display: flex;
        margin-left: 20rpx;
        height: 224rpx; // 固定商品项高度
        width: 590rpx; // 确保宽度适配

        .goods-image {
          width: 160rpx;
          height: 160rpx;
          border-radius: 20rpx;
        }

        .goods-info {
          flex: 1;
          margin-left: 20rpx;

          .goods-name {
            font-size: 28rpx;
            color: #333;
            line-height: 1.4;
          }

          .goods-spec {
            width: 100rpx;
            background-color: #f8f8f8;
            padding: 8rpx 22rpx;
            font-size: 24rpx;
            color: #ACACAC;
            margin-top: 10rpx;
          }

          .price-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20rpx;

            .price {
              color: #FF1712;
              font-weight: bold;

              &::before {
                content: '¥';
                font-size: 24rpx;
              }
            }
          }
        }
      }
    }
  }
}
</style>